<template>
    <Layout>
        <!-- 头部 -->
        <div class="TopBanner">
            <div class="container">
                <div class="row row--30">
                    <div class="col-lg-12">
                        <p class="Banner-ti">数据驱动 智慧生活</p>
                        <h2 class="Banner-Zhong">让API数据服务</h2>
                        <h2 class="Banner-Bot">成为您创新的引擎</h2>
                    </div>
                    <div class="col-lg-12">
                        <p class="Banner-Cul"><span>精雕细琢十载</span>|<span
                                style="margin: 0px 2px;">API安全稳固</span>|<span>品质之选</span></p>
                    </div>
                    <div class="col-lg-12">
                        <div class="BannerBotBtn">
                          
                            <button class="BannerBotBtn-1" @click="ShowNow">立即查看</button>
                            <button class="BannerBotBtn-2" @click="NowRegister">立即注册</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻中心 -->
        <div class="NewsCenter">
            <div class="container">
                <el-row :gutter="20" style="margin: 50px 0 40px 0;">
                    <el-col :span="4">

                        <el-menu default-active="1" class="el-menu-vertical-demo" text-color="#3D3D3D"
                            active-text-color="#3D3D3D">

                            <el-menu-item index="1">
                                <span slot="title">导航一</span>
                            </el-menu-item>
                            <el-menu-item index="2">
                                <span slot="title">导航二</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <span slot="title">导航三</span>
                            </el-menu-item>

                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                        </el-menu>

                    </el-col>
                    <el-col :span="20">
                        <div class="NewsRight" v-for="item in 4">
                            <p class="NewsrOnbox">
                                <img src="../assets/images/banner/laba.png" alt="" class="newsrimg">
                                <span class="newsn1">如何做好AIGC产品合规?</span>
                            </p>
                            <p class="newsn2">2024/04/17</p>
                            <p class="newsn3">
                                AIGC数字风控行业手册》免费下载《AIGC数字风控行业手册》免AIGC数字风控行业手册》免费下载《AIGC数字风控行业手册》免费下
                                载免费下载.AIGC数字风控行业手册》免费下载《AIGC数字风控行业手册》免AIGC数字风控行业手册》免费下载《AIGC数字风控行业手册》免费下 载免费下载
                            </p>
                            <p class="Newsrtwbox" @click="NewsClickDetail">
                                <span class="newsn4">了解详情</span><img src="../assets/images/banner/jiantour.png" alt=""
                                    class="newsn5">
                            </p>
                        </div>
                    </el-col>

                </el-row>
                <el-row class="ChangeFenye">
                    <el-col>
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="400">
                        </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 注册 -->
        <registerPage></registerPage>

    </Layout>
</template>

<script>
import Icon from '../components/icon/Icon'
import Layout from '../components/common/Layout'
import BlogPostMixin from '../mixins/BlogPostMixin'
import registerPage from '../components/register/register'
export default {
    name: 'BlogListPage',
    components: {
        Icon,
        Layout,
        registerPage
    },
    mixins: [BlogPostMixin],
    data() {
        return {
            currentPage: 5,


        }
    },
    methods: {
        NewsClickDetail(){
            this.$router.push('/newsdetail');
        },
        handleSizeChange(){
            console.log(this.pageSize);
        },
        handleCurrentChange(){
            console.log(this.pageSize);

        },

        ShowNow(){
            this.$router.push({
				    path: '/product'
				})
        },
        NowRegister(){
            this.$router.push({
				    path: '/register'
				})
        }
    }

}
</script>
<style scoped lang="scss">
// 头部
.TopBanner {
    width: 100%;
    margin: 0 auto;
    color: #fff;
    // height: 700px;
    /* background-color: #ccc; */
    background-image: url('../assets/images/banner/xinwendbgc.png');
    background-size: 100% 100%;

    .Banner-ti {
        margin-top: 5%;
        font-family: serif;
        font-size: 48px;
    }

    .Banner-Zhong {
        margin: 5px 0px;
        font-size: 68px;
        font-weight: 700;
    }

    .Banner-Bot {
        font-weight: 400;
        font-size: 68px;
        margin-bottom: 20px;
    }

    .Banner-Cul {
        margin-bottom: 4%;
        font-size: 20px;
    }

    .BannerBotBtn {
        display: flex;
        margin-bottom: 20%;

        .BannerBotBtn-1 {
            width: 160px;
            border: 2px solid #62C3D0;
            /* border: 3px solid transparent; */
            color: #62C3D0;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            margin: 0px 10px 0px 0px;
            height: 59px;
            background-color: transparent;
        }
        
        .BannerBotBtn-2 {
            width: 160px;
            border: 2px solid #e30083;
            color: #fff;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            height: 59px;
        
            margin: 0px 5px 0px 0px;
            background-color: #e30083;
        }
    }
    @media screen and (max-width: 1200px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 32px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 52px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 52px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 16px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 140px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 50px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 140px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                height: 50px;

                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }
    }


    @media screen and (max-width: 768px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 20px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 36px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 40px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 14px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 100px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 40px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 100px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                height: 40px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }

    @media screen and (max-width: 500px) {
        .Banner-ti {
            margin-top: 8%;
            font-family: serif;
            font-size: 16px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 20px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 12px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 80px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 30px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 80px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                height: 30px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }
}

// 内容  
.NewsCenter {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;

    .NewsRight {
        margin: 10px 0 20px 0;
        .NewsrOnbox {
            display: flex;
            align-items: center;
        }

        .newsrimg {
            width: 20px;
            margin-right: 10px;
        }

        .newsn1 {
            color: #3D3D3D;
            font-weight: 600;
            font-size: 16px;
        }

        .newsn2 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 14px;
            color: #3D3D3D;
            padding: 5px 0 5px 30px;
        }

        .newsn3 {
            font-size: 14px;
            color: #7E7E7E;
            padding: 5px 5px 5px 30px;

            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .Newsrtwbox{
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        .newsn4 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 14px;
            color: #0059FF;
            padding: 5px 5px 5px 30px;

        }
        .newsn5{
            width: 14px;
        }
    }
    .ChangeFenye {
        margin: 0px 0 20px 0;
        text-align: right;
    }
}

// menu背景
.el-menu-item.is-active {
    background-image: url('../assets/images/banner/menubgc.png');
    background-size: 100% 100%;
}

.el-menu {
    border-right: none;
}
</style>